import React, { Component } from 'react';
import { ListView, PullToRefresh } from 'antd-mobile';
import ReactDOM from 'react-dom';


export default class YwxListView extends Component {

    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2
        });

        this.state = {
            refreshing: false,
            dataSource,
            height: document.documentElement.clientHeight * 3 / 4
        }
    }

    componentDidMount() {
        this.renderList();
    }

    resetHeight() {
        const height = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.getBoundingClientRect().top;
        this.setState({
            height,
        })
    }

    renderList = (props = this.props) => {
        // const height = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
        const height = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.getBoundingClientRect().top;
        let dataSource = this.state.dataSource.cloneWithRows(props.list);
        this.setState({
            isLoading: false,
            height,
            dataSource
        })
    }

    componentWillReceiveProps(nextProps) {
        this.renderList(nextProps);
    };

    onRefresh = () => {
        this.props.onRefresh && this.props.onRefresh();
    }

    onEndReached = () => {
        if (this.state.isLoading) {
            return
        }

        this.setState({
            isLoading: true
        })
        this.props.onEndReached && this.props.onEndReached();
    }

    render() {

        let footerText = '';
        if (this.props.noMore) {
            footerText = '没有更多了~'
        } else if (this.state.isLoading) {
            footerText = '正在加载...'
        }

        return (
            <div>
                <ListView
                    ref={el => this.lv = el}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                    renderHeader={() => (
                        this.props.header
                    )}
                    renderFooter={() => (
                        <div style={{ textAlign: 'center' }}>
                            {footerText}
                        </div>)}
                    dataSource={this.state.dataSource}
                    renderRow={this.props.renderRow}
                    pageSize={this.props.pageSize}
                    renderSeparator={this.props.renderSeparator}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={300}
                    scrollRenderAheadDistance={500}
                    pullToRefresh={
                        <PullToRefresh
                            damping={30}
                            refreshing={this.props.refreshing}
                            onRefresh={this.onRefresh}
                        />
                    }
                />
            </div>
        );
    }
}